<template>
	<div class="root">
        <!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-form :inline="true" :model="query" >
				<el-form-item>
					<el-input v-model="query.keyword" placeholder="请输入关键字查询" @click="search"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="search">查询</el-button>
				</el-form-item>
			</el-form>
		</el-col>
    <el-col :span="24">
      <el-table
        v-loading="listLoading"
        :data="pageInfo.rows"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="50">
        </el-table-column>
        <el-table-column prop="id" width="110" label="id">
        </el-table-column>
        <el-table-column prop="name" label="权限名称" width="210">
        </el-table-column>
        <el-table-column prop="url" label="路径" width="180">
        </el-table-column>
        <el-table-column prop="desc" label="描述" width="230">
        </el-table-column>
        <el-table-column prop="sn" label="标识" width="350">
        </el-table-column>
        <el-table-column prop="parent.name" label="父权限">
        </el-table-column>
      </el-table>
    </el-col>
    <el-col :span="24" style="margin-top: 20px;">
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.page"
      :page-sizes="[5, 10]"
      :page-size="query.rows"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total">
    </el-pagination>
    </el-col>

  </div>
		
</template>

<script>
  import perApi from '@/api/auth/permission'
	export default {
		data() {
			return {
				//分页相关
				query:{
					page:1,
					rows:5,
					keyword:''
				},
				pageInfo:{
					total:0, //总记录数
					rows:[] //表数据
				},
        saveFormVisible:false,
				listLoading: true,
        
			}
		},
    created(){

    },
		methods: {
			search(){
        this.getListPage()
      },
      //分页查询
      getListPage(){
        this.listLoading = true
        perApi.pageList(this.query)
          .then(response => {
            this.pageInfo = response.data.resultObj
            setTimeout(() => {
              this.listLoading = false
            },350)
          })
      },
      //全选回调函数
      handleSelectionChange(value){
        this.ids = []
        value.forEach(d => {
          this.ids.push(d.id)
        });
      },
      //每页条数发生改变的回调函数
      handleSizeChange(pageTotals){
        this.query.rows = pageTotals
        this.getListPage()
      },
      //当前页发生改变的回调函数
      handleCurrentChange(curentPage){
        this.query.page = curentPage
        this.getListPage()
      },
		},
		mounted() {
      this.getListPage()
		}
	}

</script>

<style scoped>
.root{
  margin: 30px 16px;
}
.toolbar{
  background-color: rgb(244, 243, 244);
  padding-top: 10px;
  padding-left: 10px;
  height: 60px;
}
</style>